<?php $this->load->view('home/header');?>
<!-- Begin Wrapper -->
<div class="wrapper"><!-- Begin Intro -->
<div class="intro">Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum, Vestibulum id ligula porta. </div>
<ul class="social">
<li><a class="rss" href="#"></a></li><li><a class="facebook" href="#"></a></li><li><a class="twitter" href="#"></a></li><li><a class="pinterest" href="#"></a></li><li><a class="dribbble" href="#"></a></li><li><a class="flickr" href="#"></a></li><li><a class="linkedin" href="#"></a></li></ul><!-- End Intro --> 

<!-- Begin Container -->
<div class="box">

	<h1 class="title">Typography</h1>
	
	
	<div class="one-half">
		<h3>Boxes</h3>
		<div class="info-box">This is an information box</div>
		<div class="download-box">This is a download box</div>
		<div class="warning-box">This is a warning box</div>
		<div class="note-box">This is a note box</div>
	</div>
	
	<div class="one-half last">
		<h3>Buttons</h3>
		<a href="#" class="button">Default Button</a> 
		<br /> 
		<a href="#" class="button blue">Blue Button</a>
		<a href="#" class="button green">Green Button</a>
		<a href="#" class="button pink">Pink Button</a>
		<a href="#" class="button purple">Purple Button</a>
		<a href="#" class="button red">Red Button</a>
		<a href="#" class="button yellow">Yellow Button</a>
	</div>
	<div class="clear"></div>
	<hr />
	
		
	<div class="one-half">
		<h3>Unordered List</h3>
		<ul>
			<li>Pellentesque non diam et tortor dignissim.</li>
			<li>Neque sit amet mauris egestas quis mattis.</li>
			<li>Cras justo odio, dapibus ac facilisis.</li>
			<li>Curabitur viver justo sed scelerisque.</li>
		</ul>
	</div>
	
	<div class="one-half last">
		<h3>Ordered List</h3>
		<ol>
		<li>Pellentesque non diam et tortor dignissim.</li>
		<li>Neque sit amet mauris egestas quis mattis.</li>
		<li>Cras justo odio, dapibus ac facilisis.</li>
		<li>Curabitur viver justo sed scelerisque.</li>
		</ol>
	</div>
	<div class="clear"></div>
	<hr />
	
	<h3>Blockquote</h3>
	<blockquote>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</blockquote>
		
	<div class="clear"></div>
	<hr />
	
	<h3>Dropcap</h3>
	<span class="dropcap">D</span> uis non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper. Nulla facilisi. Donec interdum, enim in dignissim lacinia, lectus nisl viverra lorem, ac pulvinar nunc ante at neque. Proin et dui eros, at aliquet est. Pellentesque consectetur lectus quis enim mollis ut convallis urna malesuada. Sed tincidunt interdum sapien vel gravida. Nulla a tellus lectus, in aliquet tellus. Donec aliquam neque quis mi.</p>
	<div class="clear"></div><hr />
	
	<h3>Highlights</h3>
	<p>Duis non lectus sit amet est imperdiet cursus elementum vitae eros. <span class="lite1">This is hightlight</span> morbi vitae magna tellus, ac mattis urna. <span class="lite2">This is second highlight</span> posuere. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper.</p>

</div>
<!-- End Container -->

</div>
<!-- End Wrapper -->

<!-- Begin Footer -->
<div class="footer-wrapper">
<div id="footer" class="four">
		<div id="first" class="widget-area">
			<div class="widget widget_search">
				<h3 class="widget-title">Search</h3>
				<form class="searchform" method="get" action="#">
					<input type="text" name="s" value="type and hit enter" onFocus="this.value=''" onBlur="this.value='type and hit enter'"/>
				</form>
			</div>
			<div class="widget widget_archive">
				<h3 class="widget-title">Archives</h3>
				<ul>
					<li><a href="#">September 2012</a> (6)</li>
					<li><a href="#">August 2012</a> (2)</li>
					<li><a href="#">July 2012</a> (2)</li>
					<li><a href="#">June 2012</a> (4)</li>
					<li><a href="#">May 2012</a> (3)</li>
					<li><a href="#">January 2012</a> (1)</li>
				</ul>
			</div>	
		</div><!-- #first .widget-area -->
	
		<div id="second" class="widget-area">
			<div id="twitter-2" class="widget widget_twitter">
					<h3 class="widget-title">Twitter</h3>
					
					<div id="twitter-wrapper">
						<div id="twitter"></div>
						<span class="username"><a href="http://twitter.com/elemisdesign">→ Follow @elemisdesign</a></span>
					</div>
			</div>
		</div><!-- #second .widget-area -->
	
		<div id="third" class="widget-area">
		<div id="example-widget-3" class="widget example">
			<h3 class="widget-title">Popular Posts</h3>
			<ul class="post-list">
			  	<li> 
			  		<div class="frame">
			  			<a href="#"><img src="style/images/art/s1.jpg" /></a>
			  		</div>
					<div class="meta">
					    <h6><a href="#">Charming Winter</a></h6>
					    <em>28th Sep 2012</em>
				    </div>
				</li>
				<li> 
			  		<div class="frame">
			  			<a href="#"><img src="style/images/art/s2.jpg" /></a>
			  		</div>
					<div class="meta">
					    <h6><a href="#">Trickling Stream</a></h6>
					    <em>5th Sep 2012</em>
				    </div>
				</li>
				<li> 
			  		<div class="frame">
			  			<a href="#"><img src="style/images/art/s3.jpg" /></a>
			  		</div>
					<div class="meta">
					    <h6><a href="#">Morning Glory</a></h6>
					    <em>26th Sep 2012</em>
				    </div>
				</li>
			</ul>
			
		</div>
		</div><!-- #third .widget-area -->
		
		<div id="fourth" class="widget-area">
		<div class="widget">
			<h3 class="widget-title">Flickr</h3>
			<ul class="flickr-feed"></ul>
			
		</div>
		</div><!-- #fourth .widget-area -->
	</div>
</div>
<div class="site-generator-wrapper">
	<div class="site-generator">Copyright Obscura 2012. Design by <a href="http://elemisfreebies.com">elemis</a>. All rights reserved.</div>
</div>
<!-- End Footer -->
<?php $this->load->view('home/footer');?>